<template>
  <div>
    <!--    <div class="titleItem">-->
    <!--      <span>点检内容</span>-->
    <!--      <div class="checkObject">-->
    <!--        <div-->
    <!--          v-for="(item, index) in checkContent"-->
    <!--          :key="index"-->
    <!--          class="checkObjectItem"-->
    <!--        >-->
    <!--          <div class="checkObjectName">{{ item.name }}</div>-->
    <!--          <div class="checkObjectValue">{{ item.value }}</div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    <div class="titleItem">-->
    <!--      <span>点检标准</span>-->
    <!--      <div class="checkObject">-->
    <!--        <div-->
    <!--          v-for="(item, index) in checkStandard"-->
    <!--          :key="index"-->
    <!--          class="checkObjectItem"-->
    <!--        >-->
    <!--          <div class="checkObjectName">{{ item.name }}</div>-->
    <!--          <div class="checkObjectValue">{{ item.value }}</div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
    <div class="titleItem">
      <span>检测使用工具</span>
    </div>
    <div class="contentTable">
      <Table ref="drawerSelection" :columns="toolColumns" :data="planToolList"></Table>
    </div>
    <div class="titleItem">
      <span>检测使用物料</span>
    </div>
    <div class="contentTable">
      <Table ref="drawerSelection" :columns="materialColumns" :data="planMaterialList"></Table>
    </div>
  </div>
</template>

<script>
  export default {
    name: "contentDetail",
    props: ['planMaterialList', 'planToolList'],
    data() {
      return {
        // checkContent: [
        //   { name: "点检内容", value: "主轴清洗" },
        //   { name: "点检方法", value: "主轴清洗" },
        // ],
        // checkStandard: [
        //   { name: "下限", value: "0.5" },
        //   { name: "上限", value: "1.0" },
        //   { name: "单位", value: "摄氏度" },
        // ],
        toolColumns: [
          { title: `${ this.$t('maintenance.materialcode') }`, key: "toolCode" },
          { title: "使用工具", key: "toolName" },
          { title: "规格型号", key: "toolModel" },
          { title: "品牌", key: "toolBrand" },
          { title: `${ this.$t('spareParts.quantity') }`, key: "toolNum" },
          { title: "保养方式", key: "keepType" },
        ],
        materialColumns: [
          { title: `${ this.$t('maintenance.materialcode') }`, key: "materialCode" },
          { title: `${ this.$t('maintenance.materialname') }`, key: "materialName" },
          { title: `${ this.$t('spareParts.quantity') }`, key: "num" },
          { title: `${ this.$t('maintenance.Unitprice') }`, key: "unitPrice" },
          { title: `${ this.$t('maintenance.totalprice') }`, key: "totalPrice" },
        ],
        // toolData: this.planToolList,
        // materialData: this.planMaterialList
      };
    },
  };
</script>

<style lang="scss">
  .titleItem {
    position: relative;
    font-size: 18px;
    font-weight: bold;
    padding: 10px;
    .checkObject {
      display: flex;
      flex-wrap: wrap;
      padding: 20px;
      .checkObjectItem {
        display: flex;
        flex: 0 50%;
        .checkObjectName {
          height: 40px;
          line-height: 40px;
          width: 30%;
          border: 1px solid #eeeeee;
          background: #f5f6f7;
          text-align: right;
          padding-right: 10px;
        }
        .checkObjectValue {
          height: 40px;
          line-height: 40px;
          width: 70%;
          border: 1px solid #eeeeee;
          padding-left: 10px;
        }
      }
    }
    .checkTool {
      display: flex;
      padding: 20px;
      .checkToolItem {
        flex: 1;
        .checkObjectName {
          height: 40px;
          line-height: 40px;
          border: 1px solid #eeeeee;
          background: #f5f6f7;
          text-align: center;
        }
        .checkObjectValue {
          height: 40px;
          line-height: 40px;
          border: 1px solid #eeeeee;
          text-align: center;
        }
      }
    }
    .searchBox {
      .label {
        display: flex;
      }
    }
    .contentTable {
      padding: 20px;
    }
  }
  .titleItem::before {
    content: "";
    position: absolute;
    width: 3px;
    height: 20px;
    top: 12px;
    left: 0px;
    background: #187bdb;
  }
</style>
